<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="first">
          <el-row>
            <el-col :span="12">
              <el-form-item label="系统编码" prop="code">
                <el-input v-model="model.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统名称" prop="name">
                <el-input v-model="model.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="AppKey" prop="appkey">
                <el-input v-model="model.appkey">
                  <el-button slot="append" @click="autoGenerateKey">生成</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="AppSecret" prop="appsecret">
                <el-input v-model="model.appsecret">
                  <el-button slot="append" @click="autoGenerateSecret">生成</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人" prop="contractman">
                <el-input v-model="model.contractman"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人联系方式" prop="contractmobile">
                <el-input v-model="model.contractmobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="消息推送接口" prop="noticeurl">
                <el-input v-model="model.noticeurl"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="授权范围" prop="scope">
                <el-select v-model="model.scope" filterable clearable>
                  <el-option v-for="item in codeModel.scopeList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要加密" prop="needverify">
                <el-select v-model="model.needverify" filterable clearable>
                  <el-option v-for="item in codeModel.needverifyList" :key="item.code" :label="item.name" :value="parseInt(item.code)" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="description">
                <el-input v-model="model.description" type="textarea" :rows="4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序码" prop="sortcode">
                <el-input-number v-model="model.sortcode" controls-position="right" :step="1" :min="0" style="width:100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效" prop="enabled">
                <el-radio-group v-model="model.enabled">
                  <el-radio :label="parseInt(item.code)" v-for="item in codeModel.enabledList" :key="item.code">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="扩展信息" name="second">
          <el-row>
            <el-col :span="24">
              <el-form-item v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="item" :label="'扩展字段' + item">
                <el-input v-model="model['extendfield' + item]"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: {},
  data() {
    return {
      moduleTitle: '开放系统',
      urlPrefix: '/sys/app/',
      url: {
        // 额外的url
      },
      activeTab: 'first'
    }
  },
  methods: {
    loaded() {
      // 页面加载完毕执行
    },
    autoGenerateSecret() {
      const appsecret = this.uuid().replace(/\-/g, '')
      this.$set(this.model, "appsecret", appsecret)
    },
    autoGenerateKey() {
      const appkey = this.key().replace(/\-/g, '')
      this.$set(this.model, "appkey", appkey)
    },
    key() {
      let s = []
      let hexDigits = '023456789abcdefghijkmnpqrstuvwxyz'
      for (var i = 0; i < 10; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * hexDigits.length), 1)
      }

      let key = 'tp' + s.join('')
      return key
    },
    uuid() {
      let s = []
      let hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      let uuid = s.join('')
      return uuid
    }
  }
}
</script>
